<template>
  <div
    class="container"
    style="background: #f5f5f5; width: 1270px; height: 800px; display: flex"
  >

    <div class="box">
      <br />
      <br />
      <el-upload
        list-type="picture"
        action=""
        accept=".jpg, .png"
        :limit="1"
        :auto-upload="false"
        :on-change="getFile"
      >
        <el-button size="small" type="primary">选择图片上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件</div>
      </el-upload>
      <br /><br />
      <img :src="naviget" width="300px" alt="" />
    </div>
  </div>
</template>
<style scoped>
.box {
  width: 1100px;
  height: 700px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 10px;
}
</style>
<script>
export default {
  data() {
    return {
      naviget:''
    };
  },
  methods: {
   getFile(file) {
      this.getBase64(file.raw).then((res) => {
        this.$apiPost("/api/index.php/index/upload/uploadimg", {
          imgurl: res,
        }).then((res) => {
            this.naviget='http://47.94.4.201'+res.data.url
          console.log(this.naviget);
        });
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = () => {
          resolve(imgResult);
        };
      });
    },
  },
  components: {},
};
</script>

